<template>
  <div class="content box-sizing-box">
    <Header
      :companyProvStatsList="companyProvStatsList"
      @changePro="(e) => init(e)"
    />
    <div class="content_container">
      <div class="content_container_left">
        <div class="content_container_left_top">
          <div class="title">电量指标</div>
          <div class="mt10">
            <div class="topConBox flex a-center blue">
              <div class="topConIcon"></div>
              <div class="flex a-center">
                <div class="content_container_left_font_bigTitle">
                  累计充电量
                </div>
                <div class="content_container_left_font_smallTitle ml10">
                  <span>{{
                    (dataObj.totalCharge / 10).toFixed(2) || "--"
                  }}</span
                  >万kwh
                </div>
              </div>
            </div>
            <div class="topConBox flex a-center yellow mt5">
              <div class="topConIcon"></div>
              <div class="flex a-center">
                <div class="content_container_left_font_bigTitle">
                  累计放电量
                </div>
                <div class="content_container_left_font_smallTitle ml10">
                  <span>{{
                    (dataObj.totalDischarge / 10).toFixed(2) || "--"
                  }}</span
                  >万kwh
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_container_left_middle">
          <div class="title">功率曲线</div>
          <div class="content_container_left_middle_conBoxMain mt10">
            <div ref="lineChart" class="lineChart"></div>
          </div>
          <!--  <div class="flex-center a-center mt20">
            <div class="flex1 text-center">
              <div class="content_container_left_middle_conBoxMain_bigTitle">
                <span class="font">{{ dataObj.monCharge }}</span>
              </div>
              <div
                class="content_container_left_middle_conBoxMain_smallTitle mt5"
              >
                本月累计充电量(MWh)
              </div>
            </div>
            <div class="flex1 text-center">
              <div
                class="content_container_left_middle_conBoxMain_bigTitle dischargeBattery"
              >
                <span class="font">{{ dataObj.monDischarge }}</span>
              </div>
              <div
                class="content_container_left_middle_conBoxMain_smallTitle mt5"
              >
                本月累计放电量(MWh)
              </div>
            </div>
          </div> -->
        </div>
        <div class="content_container_left_bottom">
          <div class="title">温度曲线</div>
          <div class="mt5 box-sizing-box">
            <div class="content_container_right_bottom_conBoxMain mt10">
              <div ref="temperatureCurve" class="temperatureCurve"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="content_container_center m-lr25 flex-between flex-column">
        <div class="content_container_center_top">
          <div class="flex-center a-center top">
            <div class="top_cap">
              <div class="top_cap_title flex-start">总容量（MWh）</div>
              <div class="flex-start mt5">
                <div
                  class="top_cap_num"
                  v-for="(item, index) in capList"
                  :key="index"
                >
                  {{ item }}
                </div>
              </div>
            </div>
          </div>
          <div class="top_map">
            <div class="data">
              <div class="data_item">
                <div class="title">电池堆</div>
                <div class="con mt10">
                  <span>{{ numObj.energyLinkNum }}</span
                  >堆
                </div>
              </div>
              <div class="data_item mt15">
                <div class="title">电池簇</div>
                <div class="con mt10">
                  <span>{{ numObj.blockNum }}</span
                  >簇
                </div>
              </div>
              <div class="data_item mt15">
                <div class="title">电芯</div>
                <div class="con mt10">
                  <span>{{ numObj.cellNum }}</span
                  >颗
                </div>
              </div>
              <div class="data_item mt15">
                <div class="title">摄像头</div>
                <div class="con mt10">
                  <span>{{ numObj.cameraNum }}</span
                  >个
                </div>
              </div>
            </div>

            <div class="map" ref="map"></div>
          </div>
        </div>
        <div class="content_container_center_bottom">
          <div class="title">综合指标</div>
          <div class="IndexBox mt5 pt10 box-sizing-box flex-center a-center">
            <div class="flex-center a-center bottom_con">
              <div class="flex1 flex-center a-center bottom_con_box">
                <div class="bottom_con_base">
                  <img src="../../assets/screen/icon5.png" />
                </div>
                <div class="bottom_con_font text-center">
                  <div class="bottom_con_font_big">
                    {{ rankingObj.num || "--" }}
                  </div>
                  <div class="mt15 bottom_con_font_sm">总用户数(家)</div>
                </div>
              </div>
              <div class="flex1 flex-center a-center bottom_con_box">
                <div class="bottom_con_base">
                  <img src="../../assets/screen/icon6.png" />
                </div>
                <div class="bottom_con_font text-center">
                  <div class="bottom_con_font_big">
                    {{ rankingObj.runDays || "--" }}
                  </div>
                  <div class="mt15 bottom_con_font_sm">安全运行天数（天）</div>
                </div>
              </div>
              <div class="flex1 flex-center a-center bottom_con_box">
                <div class="bottom_con_base">
                  <img src="../../assets/screen/icon7.png" />
                </div>
                <div class="bottom_con_font text-center">
                  <div class="bottom_con_font_big">
                    {{ rankingObj.maxSchedul || "--" }}
                  </div>
                  <div class="mt15 bottom_con_font_sm">最大可调度功率(KW)</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content_container_right">
        <div class="content_container_right_top">
          <div class="title">节能指标</div>
          <div class="mt10">
            <div class="topConBox flex a-center blueGreen">
              <div class="flex a-center">
                <div class="topConIcon"></div>
              </div>
              <div class="content_container_right_font_bigTitle">累计节费</div>
              <div class="content_container_right_font_smallTitle">
                <span>{{ dataObj.totalCostSaving || "--" }}</span
                >万元
              </div>
            </div>

            <div class="topConBox flex a-center green mt5">
              <div class="topConIcon"></div>
              <div class="flex a-center">
                <div class="content_container_right_font_bigTitle">
                  减少峰期碳排放
                </div>
                <div class="content_container_right_font_smallTitle mr5">
                  <span>{{
                    (dataObj.totalReduceCarbonEmissions / 10000).toFixed(2) ||
                    "--"
                  }}</span
                  >万吨
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_container_right_middle">
          <div class="title">容量占比</div>
          <div
            class="mt5 pt10 box-sizing-box flex-center a-center"
            style="height: calc((94vh - 410px) / 2)"
          >
            <div class="pieCon flex-center a-center">
              <div class="pieBg"></div>
              <div ref="rankingBox" class="rankingBox"></div>
            </div>
            <div class="legend ml20">
              <div class="legend_box box-sizing-box">
                运行中<span>{{ rankingObj.num3 }}</span
                >个
              </div>
              <div class="legend_box box-sizing-box legend_box_building">
                建设中<span>{{ rankingObj.num2 }}</span
                >个
              </div>
              <div class="legend_box box-sizing-box legend_box_waitbuilding">
                待建设<span>{{ rankingObj.num1 }}</span
                >个
              </div>
            </div>
          </div>
        </div>
        <div class="content_container_right_bottom">
          <div class="title">电站明细</div>
          <div
            class="pt10 box-sizing-box content_container_right_bottom_content"
            style="height: calc((94vh - 410px) / 2); overflow: hidden"
          >
            <div
              class="content_container_right_bottom_userListHeader flex-center a-center"
            >
              <div style="width: 40px"></div>
              <div class="flex1 flex-center a-center">电站名称</div>
              <div class="flex1 flex-center a-center">投运天数</div>
              <div class="flex1 flex-center a-center">容量(MWh)</div>
            </div>
            <div class="content_container_right_bottom_userListBody">
              <div
                ref="roll"
                class="roll"
                @mousemove="testMove"
                @mouseleave="testMend"
              >
                <div
                  class="flex-center a-center listDetial"
                  v-for="(item, index) in companyList"
                  :key="item.id"
                >
                  <div class="ranking">{{ index + 1 }}</div>
                  <div class="flex1 text-center">
                    {{
                      item.hasOwnProperty("station")
                        ? item.station.name
                        : item.name
                    }}
                  </div>
                  <div class="flex1 text-center">
                    {{ item.runDays || "--" }}
                  </div>
                  <div class="flex1 text-center">{{ item.cap }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>


import moment from "moment"
import Header from "./conpoments/header.vue"
import chargeDischarge from "./config/IndexChargeDischarge"
import capPie from "./config/IndexCapPie"
import tmperatureLine from "./config/IndexTemperatureLine"
import indexmap from "./config/Indexmap"
import IndexGDmap from "./config/IndexGDmap"
import IndexZJmap from "./config/IndexZJmap"
import IndexHNmap from "./config/IndexHNmap"
import IndexSHmap from "./config/IndexSHmap"
import IndexJSmap from "./config/IndexJSmap"
import * as echarts from "echarts"

import china from "./json/china.json"
import gd from "./json/gdAll.json"
import zj from "./json/zj.json"
import hn from "./json/hn.json"
import sh from "./json/sh.json"
import js from "./json/js.json"
import { MapChart } from "echarts/charts"
import { EffectScatterChart } from "echarts/charts"


import { MONITOR_TAB_ENUM } from "@/constants/stationConfig"
const router = useRouter()
echarts.use([EffectScatterChart])
echarts.use([MapChart])
const instance = getCurrentInstance()
const { $store } = instance.appContext.config.globalProperties
const $api = inject("$api")
onMounted(async () => {
  init()
})
const year = moment().format("YYYY")
const month = moment().format("MM/DD")
/* ----------------------------------------------数据初始化开始-------------------------------------- */
const init = async (provId) => {
  //销毁图表实例，防止重复创建
  var chart = map.value
  /* var chartInstance = echarts.getInstanceByDom(chart)
  if (chartInstance) {
    chartInstance.dispose()
  }
 */
  getDatas(provId)
  await getEmsCompanyList(provId)
  getCameraNum(provId)
  getEsData(provId)
  setData(provId)
  setTmpData(provId)

  await getCompanyProvStats()
  switch (provId) {
    case 440000:
      setGDMap()
      break
    case 330000:
      setZJMap()
      break
    case 430000:
      setHNMap()
      break
    case 310000:
      setSHMap()
      break
    case 320000:
      setJSMap()
      break
    default:
      setMap()
  }

  //
  initProList()

  setTimeout(() => {
    start()
  }, 500)
}
/* ----------------------------------------------数据初始化结束-------------------------------------- */
/* ----------------------------------------------省份选择开始-------------------------------------- */

let allProList = ref([])
let companyProvStatsList = ref([])
let nationwide = {
  projectCount: companyProvStatsList.value.reduce(
    (acc, item) => acc + item.projectCount,
    0
  ),
  provId: 0,
  provName: "全国",
}
let chosePro = ref(0)
const initProList = () => {
  allProList.value = companyProvStatsList.value
  allProList.value.push(nationwide)
}
//选择省份改变
const changePro = async (e) => {
  //let id = e === 0 ? null : e
  await nextTick()
  init(e)
}
/* ----------------------------------------------省份选择结束-------------------------------------- */
/* ----------------------------------------------统计数据开始-------------------------------------- */
let dataObj = ref({})
const getDatas = async (id) => {
  let res = await $api.statsData({
    provId: id || null,
  })
  dataObj.value = res.data
}
//进入电站
const goToStation = () => {
  router.replace("/FrontPage/StationOverview")
}
/* ----------------------------------------------统计数据结束-------------------------------------- */
/* ----------------------------------------------充放电曲线开始-------------------------------------- */
//日期修改
const visible = ref(false)
const cancel = () => {
  visible.value = false
}
const sure = () => {
  if (!hisStoryDate.value) {
    hisStoryDate.value = moment().subtract(1, "day").format("YYYY-MM-DD")
  }
  setData(chosePro.value)
  visible.value = false
}
//数据请求
let lineChart = ref()
let today = ref(moment().format("YYYY-MM-DD"))
let hisStoryDate = ref(moment().subtract(1, "day").format("YYYY-MM-DD"))

const getCurveDayList = async (date, id) => {
  let formInline = ref({
    date: date,
    provId: id ? id : 0,
  })
  let res = await $api.newCurveDayList(formInline.value)
  return res.data
}
//设置曲线数据
const setData = async (id) => {
  Promise.all([
    getCurveDayList(today.value, id),
    getCurveDayList(hisStoryDate.value, id),
  ]).then((res) => {
    setChart(res[0], res[1])
  })
}
//图表设置
let powerCurve = null
const setChart = (list, hisList) => {
  const { xAxis, series } = chargeDischarge
  xAxis.data = create(15) /* list.dataList.map((item) => {
    return item.dateTime.split(" ")[1]
  }) */

  series[0].name = "今日充放电曲线"
  series[0].data = xAxis.data.map((time) => {
    const target = list.find((v) => v.dateTime.split(" ")[1] === time)
    return target ? target.value : null
  }) /* list.dataList.map((item) => {
    return item.value
  }) */

  series[1].name = `${hisStoryDate.value}充放电曲线`
  series[1].data = xAxis.data.map((time) => {
    const target = hisList.find((v) => v.dateTime.split(" ")[1] === time)
    return target ? target.value : null
  }) /* hisList.dataList.map((item) => {
    return item.value
  }) */

  powerCurve = echarts.init(lineChart.value)
  powerCurve.setOption(chargeDischarge)
}
//处理x轴
const create = (minute) => {
  var seconds = minute * 60
  let len = (60 * 24 * 60) / seconds //数组长度
  for (var i = 0, total = 0, newArr = []; i < len; i++) {
    var h = parseInt(total / 3600),
      min = parseInt((total % 3600) / 60)
    newArr.push(s(h) + ":" + s(min) + ":" + "00")
    total += seconds
  }
  return newArr
}
const s = (n) => {
  return n < 10 ? "0" + n : n
}
/* ----------------------------------------------充放电曲线结束-------------------------------------- */
/* ----------------------------------------------获取各个数量开始-------------------------------------- */
const formatNumber = (num) => {
  return num?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
let numObj = ref({})
const getCameraNum = async (id) => {
  let res = await $api.cameraNum({ provId: id ? id : null })
  if (res.code === 0) {
    numObj.value = {
      ...res.data,
      energyLinkNum: formatNumber(res.data.energyLinkNum),
      blockNum: formatNumber(res.data.blockNum),
      cellNum: formatNumber(res.data.cellNum),
      cameraNum: formatNumber(res.data.cameraNum),
    }
  }
}
/* ----------------------------------------------获取各个数量结束-------------------------------------- */
/* ----------------------------------------------电站明细开始-------------------------------------- */
//获取用户明细数据
const companyList = ref([])

const getEmsCompanyList = async (id) => {
  let res = await $api.emsCompanyList({
    provId: id || null,
  })
  companyList.value = res.data.filter((item) => "es" in item && item.es !== 4) // 过滤掉已停用的电站
}
//明细滚动
let timer = ref(null)
let roll = ref(null)
const testMove = () => {
  clearTimeout(timer.value)
}
const testMend = () => {
  start()
}
//开启定时器方法
let speed = ref(null)
const start = () => {
  clearTimeout(timer.value)
  if (companyList.value.length === 6) {
    speed.value = 630
  } else {
    speed.value = 80
  }
  timer.value = setInterval(MarqueeTest, speed.value)
}
const MarqueeTest = () => {
  let dom = roll.value
  //判断组件是否渲染完成
  if (!dom) return
  if (dom?.offsetHeight == 0) {
    dom = roll.value
  } else {
    //如果列表数量过少不进行滚动
    if (companyList.value.length < 6) {
      clearTimeout(timer.value)
      return
    }
    //组件进行滚动
    dom.scrollTop += 1
    //判断滚动条是否滚动到底部
    if (dom.scrollTop == dom.scrollHeight - dom.clientHeight) {
      //获取组件第一个节点
      let a = dom?.childNodes[0]
      //删除节点
      dom.removeChild(a)
      //将该节点拼接到组件最后
      dom.append(a)
    }
  }
}
/* ----------------------------------------------电站明细结束-------------------------------------- */
/* ----------------------------------------------容量占比开始-------------------------------------- */
//图表设置
const rankingBox = ref()
const rankingObj = ref({})
let capList = ref([])
const getEsData = async (id) => {
  let res = await $api.esData({
    provId: id || null,
  })
  rankingObj.value = res.data
  rankingObj.value.maxSchedul = Math.round((rankingObj.value.cap3 * 1000) / 2)
  capList.value = rankingObj.value.cap.toString().split("")
  setPie()
}
const setPie = () => {
  const { series, title } = capPie
  //title.text = rankingObj.value.cap
  series[0].data = [
    {
      value: rankingObj.value.cap3,
      name: `运行中容量`,
      statusName: "运行中储能企业总容量",
      itemStyle: {
        color: "rgba(116, 227, 139, 1)", //绿色
      },
    },

    {
      value: rankingObj.value.cap2,
      name: `建设中容量`,
      statusName: "建设中储能企业总容量",
      itemStyle: {
        color: "rgba(44, 98, 246, 1)", //蓝色
      },
    },
    {
      value: rankingObj.value.cap1,
      name: `待建设容量`,
      statusName: "容量(MWh)",
      itemStyle: {
        color: "rgba(247, 203, 118, 1)", //黄色
      },
    },
  ]
  /*  series[1].data = [
    {
      value: rankingObj.value.cap3,
      name: `${rankingObj.value.cap3}`,
      statusName: "容量(MWh)",
      itemStyle: {
        color: "rgba(116, 227, 139, 0.4)",
      },
    },

    {
      value: rankingObj.value.cap2,
      name: `${rankingObj.value.cap2}`,
      statusName: "容量(MWh)",
      itemStyle: {
        color: "rgba(44, 98, 246, 0.4)",
      },
    },
    {
      value: rankingObj.value.cap1,
      name: `${rankingObj.value.cap1}`,
      statusName: "待建设储能企业总容量",
      itemStyle: {
        color: "rgba(247, 203, 118, 0.4)",
      },
    },
  ] */
  var myChart = echarts.init(rankingBox.value)
  myChart.clear()
  myChart.resize()
  myChart.setOption(capPie)

  let index = 0
  myChart.dispatchAction({
    type: "highlight",
    seriesIndex: 0,
    dataIndex: 0,
  })
  //hover选中
  myChart.on("mouseover", function (e) {
    if (e.dataIndex != index) {
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: index,
      })
    }
  })
  myChart.on("mouseout", function (e) {
    index = e.dataIndex
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: index,
    })
  })
}
/* ----------------------------------------------容量占比结束-------------------------------------- */
/* ----------------------------------------------温度曲线开始-------------------------------------- */
//日期修改
const tempVisible = ref(false)
const tempCancel = () => {
  tempVisible.value = false
}
const tempSure = () => {
  if (!tempHisStoryDate.value) {
    tempHisStoryDate.value = moment().subtract(1, "day").format("YYYY-MM-DD")
  }
  setTmpData(chosePro.value)
  tempVisible.value = false
}
const tempHisStoryDate = ref(moment().subtract(1, "day").format("YYYY-MM-DD"))
//获取温度数据
const temperatureCurve = ref()
const station = ref()
const getTemp = async (date, id) => {
  let res = await $api.tempCurve({ date: date, provId: id ? id : 0 })
  res.data.map((item) => {
    if (item.hasOwnProperty("stationId")) {
      item.station = companyList.value.find(
        (e) => e.station.id === item.stationId
      )?.station?.name
    }
    return item
  })
  return res.data
}
//设置曲线数据
const setTmpData = async (id) => {
  Promise.all([
    getTemp(today.value, id),
    getTemp(tempHisStoryDate.value, id),
  ]).then((res) => {
    setTmpLine(res[0], res[1])
  })
}
//图表设置
let tmpLine = null
const setTmpLine = (list, hisList) => {
  const { xAxis, yAxis, series, tooltip } = tmperatureLine
  xAxis.data = create(15)
  //console.log(222, list)
  // 合并两个数组中的所有温度数据
  const allTempData = [...list, ...hisList].filter(
    (item) => item.value !== null
  )
  let minValue =
    allTempData.length > 0
      ? allTempData.reduce((min, current) =>
          current.value < min.value ? current : min
        )
      : null
  yAxis.min = minValue ? minValue.value - 3 : 0
  tooltip.data = list
  series[0].name = "今日温度曲线"
  series[0].data = xAxis.data.map((time) => {
    const target = list.find((v) => v.dateTime.split(" ")[1] === time)
    let obj = {
      value: target ? target.value : null,
      station: target ? target.station : null,
    }
    return obj //target ? target.value : null
  })

  /* list.dataList.map((item) => {
    return item.value
  }) */
  series[1].name = `${tempHisStoryDate.value}温度曲线`
  series[1].data = xAxis.data.map((time) => {
    const target = hisList.find((v) => v.dateTime.split(" ")[1] === time)
    let obj = {
      value: target ? target.value : null,
      station: target ? target.station : null,
    }
    return obj
  }) /* hisList.dataList.map((item) => {
    return item.value
  }) */

  tmpLine = echarts.init(temperatureCurve.value)
  tmpLine.setOption(tmperatureLine)
}
/* ----------------------------------------------温度曲线结束-------------------------------------- */
/* ----------------------------------------------地图开始-------------------------------------- */
const map = ref()

//获取各个省份投运数据

const getCompanyProvStats = async () => {
  let res = await $api.companyProvStats()
  companyProvStatsList.value = res.data
  return res.data
}
let geoCoordMap = ref({})
const setMap = async () => {
  echarts.registerMap("china", china)
  //处理地图柱状
  china.features.forEach((item) => {
    const name = item.properties.name
    const center = item.properties.center
    if (name && center) {
      geoCoordMap.value[name] = center
    }
  })

  const { series } = indexmap
  series[0].data = companyProvStatsList.value
  series[1].data = barData()
  series[2].data = lineData()
  series[3].data = convertData(companyProvStatsList.value)
  if (window.currentChart) {
    window.currentChart.dispose()
  }
  var myChart = echarts.init(map.value)
  window.currentChart = myChart
  myChart.off("click")
  myChart.off("georoam")
  myChart.clear()
  myChart.resize()
  myChart.setOption(indexmap)
  // 下钻
  myChart.on("click", (param) => {
    switch (param.data[2].provId) {
      case 440000:
        init(440000)
        chosePro.value = 440000
        break
      case 430000:
        init(430000)
        chosePro.value = 430000
        break
      case 330000:
        init(330000)
        chosePro.value = 330000
        break
      case 310000:
        init(310000)
        chosePro.value = 310000
        break
      case 320000:
        init(320000)
        chosePro.value = 320000
        break
    }
  })
}
//柱状数据整理
//柱子状图
const barData = () => {
  return companyProvStatsList.value.map((item) => {
    return {
      coords: [
        geoCoordMap.value[item.provName],
        [
          geoCoordMap.value[item.provName][0],
          geoCoordMap.value[item.provName][1] + 1,
        ],
      ],
    }
  })
}
// 提示框
const lineData = () => {
  return companyProvStatsList.value.map((item) => {
    return [
      geoCoordMap.value[item.provName][0],
      geoCoordMap.value[item.provName][1] + 1,
      item,
    ]
  })
}
//点位
var convertData = function (data) {
  var res = []
  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap.value[data[i].provName]
    if (geoCoord) {
      res.push({
        name: data[i].provName,
        value: geoCoord.concat(data[i].projectCount),
      })
    }
  }
  return res
}
/* ----------------------------------------------地图结束-------------------------------------- */
/* ----------------------------------------------广东地图开始-------------------------------------- */
//过滤公司
const mapCompanyList = ref([])
const getGDCompany = async (id) => {
  mapCompanyList.value =
    companyList.value /* .filter((item) => item.provId === id) */
  let list = mapCompanyList.value.map((item) => {
    return {
      coord: [item.longitude, item.latitude],
      ...item,
    }
  })
  return list
}
//整理数据
const datas = ref({})
const arrangeData = async () => {
  let list = await getGDCompany(440000)
  datas.value = {
    from: [113.3348235189819, 22.991622458928937],
    to: list.map((item, index) => {
      if (item.coord[0] < 114) {
        item.lineStyle = {
          curveness: -0.3,
        }
      }
      return item
    }),
  }
}
const setGDMap = async () => {
  echarts.registerMap("china", gd)
  //处理地图柱状
  await arrangeData()

  const { series } = IndexGDmap
  //series[0].data = companyProvStatsList.value
  /* series[1].data = datas.value.to
    .filter((item) => item.es === 3)
    .map((item) => {
      return {
        lineStyle: item.lineStyle || {},
        coords: [datas.value.from, item.coord],
        name: item.name,
      }
    }) */

  series[1].data = datas.value.to.map(function (item) {
    return {
      itemStyle: {
        color:
          item.es === 3
            ? "rgba(116, 227, 139, 1)"
            : item.es === 2
            ? "rgba(44, 172, 246, 1)"
            : "rgba(247, 203, 118, 1)",
      },

      value: [...item.coord, item.value],
      ...item,
    }
  })
  series[2].data = [
    {
      name: "新巨能",
      value: [...datas.value.from, 10],
    },
  ]

  if (window.currentChart) {
    window.currentChart.dispose()
  }
  var myChart = echarts.init(map.value)
  window.currentChart = myChart
  myChart.off("click")
  myChart.off("georoam")
  myChart.clear()
  myChart.resize()
  myChart.setOption(IndexGDmap)
  // 下钻
  myChart.on("click", async (param) => {
    clickMap(param, 440000)
  })
  //地图同步缩放
  myChart.on("georoam", (params) => {
    const option = myChart.getOption() //获得option对象
    scale(params, option)
    myChart.setOption(option) //设置option
  })
}
/* ----------------------------------------------广东地图结束-------------------------------------- */
/* ----------------------------------------------浙江地图开始-------------------------------------- */
//整理数据
const dataszj = ref({})
const arrangeZJData = async () => {
  let list = await getGDCompany(330000)
  dataszj.value = {
    from: [120.31213, 30.4085],
    to: list.map((item, index) => {
      if (item.coord[0] < 114) {
        item.lineStyle = {
          curveness: -0.3,
        }
      }
      return item
    }),
  }
}
const setZJMap = async () => {
  echarts.registerMap("china", zj)
  //处理地图柱状
  await arrangeZJData()

  const { series } = IndexZJmap
  //series[0].data = companyProvStatsList.value
  /* series[1].data = datas.value.to
    .filter((item) => item.es === 3)
    .map((item) => {
      return {
        lineStyle: item.lineStyle || {},
        coords: [datas.value.from, item.coord],
        name: item.name,
      }
    }) */

  series[1].data = dataszj.value.to.map(function (item) {
    return {
      itemStyle: {
        color:
          item.es === 3
            ? "rgba(116, 227, 139, 1)"
            : item.es === 2
            ? "rgba(44, 172, 246, 1)"
            : "rgba(247, 203, 118, 1)",
      },
      name: item.name,
      value: [...item.coord, item.value],
      ...item,
    }
  })
  series[2].data = [
    {
      name: "新巨能",
      value: [...dataszj.value.from, 10],
    },
  ]
  if (window.currentChart) {
    window.currentChart.dispose()
  }
  var myChart = echarts.init(map.value)
  window.currentChart = myChart
  myChart.off("click")
  myChart.off("georoam")
  myChart.clear()
  myChart.resize()
  myChart.setOption(IndexZJmap)
  // 下钻
  myChart.on("click", async (param) => {
    clickMap(param, 330000)
  })
  myChart.on("georoam", (params) => {
    const option = myChart.getOption() //获得option对象
    scale(params, option)
    myChart.setOption(option) //设置option
  })
}
/* ----------------------------------------------浙江地图结束-------------------------------------- */
/* ----------------------------------------------湖南地图开始-------------------------------------- */
//整理数据
const datash = ref({})
const arrangeHNData = async () => {
  let list = await getGDCompany(430000)
  datash.value = {
    from: [113.002839, 28.163059],
    to: list.map((item, index) => {
      if (item.coord[0] < 114) {
        item.lineStyle = {
          curveness: -0.3,
        }
      }
      return item
    }),
  }
}
const setHNMap = async () => {
  echarts.registerMap("china", hn)
  //处理地图柱状
  await arrangeHNData()

  const { series } = IndexHNmap

  series[1].data = datash.value.to.map(function (item) {
    return {
      itemStyle: {
        color:
          item.es === 3
            ? "rgba(116, 227, 139, 1)"
            : item.es === 2
            ? "rgba(44, 172, 246, 1)"
            : "rgba(247, 203, 118, 1)",
      },
      name: item.name,
      value: [...item.coord, item.value],
      ...item,
    }
  })
  series[2].data = [
    {
      name: "新巨能",
      value: [...datash.value.from, 10],
    },
  ]

  if (window.currentChart) {
    window.currentChart.dispose()
  }
  var myChart = echarts.init(map.value)
  window.currentChart = myChart
  myChart.off("click")
  myChart.off("georoam")
  myChart.clear()
  myChart.resize()
  myChart.setOption(IndexHNmap)
  // 下钻
  myChart.on("click", async (param) => {
    clickMap(param, 430000)
  })
  myChart.on("georoam", (params) => {
    const option = myChart.getOption() //获得option对象
    scale(params, option)
    myChart.setOption(option) //设置option
  })
}
/* ----------------------------------------------湖南地图结束-------------------------------------- */
/* ----------------------------------------------上海地图开始-------------------------------------- */
//整理数据
const datassh = ref({})
const arrangeSHData = async () => {
  let list = await getGDCompany(310000)
  datassh.value = {
    from: [],
    to: list.map((item, index) => {
      if (item.coord[0] < 114) {
        item.lineStyle = {
          curveness: -0.3,
        }
      }
      return item
    }),
  }
}
const setSHMap = async () => {
  echarts.registerMap("china", sh)
  //处理地图柱状
  await arrangeSHData()

  const { series } = IndexSHmap
  //series[0].data = companyProvStatsList.value
  series[1].data = datassh.value.to.map(function (item) {
    return {
      itemStyle: {
        color:
          item.es === 3
            ? "rgba(116, 227, 139, 1)"
            : item.es === 2
            ? "rgba(44, 172, 246, 1)"
            : "rgba(247, 203, 118, 1)",
      },
      name: item.name,
      value: [...item.coord, item.value],
      ...item,
    }
  })
  series[2].data = [
    {
      name: "新巨能",
      value: [...datassh.value.from, 10],
    },
  ]

  if (window.currentChart) {
    window.currentChart.dispose()
  }
  var myChart = echarts.init(map.value)
  window.currentChart = myChart
  myChart.off("click")
  myChart.off("georoam")
  myChart.clear()
  myChart.resize()
  myChart.setOption(IndexSHmap)
  // 下钻
  myChart.on("click", async (param) => {
    clickMap(param, 310000)
  })
  myChart.on("georoam", (params) => {
    const option = myChart.getOption() //获得option对象
    scale(params, option)
    myChart.setOption(option) //设置option
  })
}
/* ----------------------------------------------上海地图结束-------------------------------------- */
/* ----------------------------------------------江苏地图开始-------------------------------------- */
const datasjs = ref({})
const arrangeJSData = async () => {
  let list = await getGDCompany(320000)
  datasjs.value = {
    from: [118.769328, 31.97585],
    to: list.map((item, index) => {
      if (item.coord[0] < 114) {
        item.lineStyle = {
          curveness: -0.3,
        }
      }
      return item
    }),
  }
}
const setJSMap = async () => {
  echarts.registerMap("china", js)
  //处理地图柱状
  await arrangeJSData()

  const { series } = IndexJSmap
  //series[0].data = companyProvStatsList.value
  series[1].data = datasjs.value.to.map(function (item) {
    return {
      itemStyle: {
        color:
          item.es === 3
            ? "rgba(116, 227, 139, 1)"
            : item.es === 2
            ? "rgba(44, 172, 246, 1)"
            : "rgba(247, 203, 118, 1)",
      },
      name: item.name,
      value: [...item.coord, item.value],
      ...item,
    }
  })
  series[2].data = [
    {
      name: "新巨能",
      value: [...datasjs.value.from, 10],
    },
  ]

  if (window.currentChart) {
    window.currentChart.dispose()
  }
  var myChart = echarts.init(map.value)
  window.currentChart = myChart
  myChart.off("click")
  myChart.off("georoam")
  myChart.clear()
  myChart.resize()
  myChart.setOption(IndexJSmap)
  // 下钻
  myChart.on("click", async (param) => {
    clickMap(param, 320000)
  })
  myChart.on("georoam", (params) => {
    const option = myChart.getOption() //获得option对象
    scale(params, option)
    myChart.setOption(option) //设置option
  })
}
/* ----------------------------------------------江苏地图结束-------------------------------------- */
/* ----------------------------------------------地图下钻开始-------------------------------------- */
//获取授权储能企业ID
const getCompanyList = async (param, provId) => {
  console.log(param, provId)
  try {
    let res = await $api.stationAuthList({
      companyId: 1000001,
      provId: provId || null,
    })
    return res.data
  } catch (error) {
    console.log(error)
  }
}
//地图点击
const clickMap = async (param, provId) => {
  if (param.data.name === "新巨能") return
  if (param.data.es !== 3) {
    message.warning("项目还未投运哦～敬请期待～")
    /* message({
      message: "项目还未投运哦～敬请期待～",
      type: "warning",
      grouping: true,
    }) */
    return
  } else {
    setTimeout(() => {
      router.push({
        path: "/MonitoringCenter/MonitorStaion",
        query: {
          stationId: param?.data?.station?.id,
          pageType: MONITOR_TAB_ENUM.Running,
        },
      })
    }, 200)
  }
}
/* ----------------------------------------------地图下钻结束-------------------------------------- */
/* ----------------------------------------------地图同步缩放开始-------------------------------------- */
const scale = async (params, option) => {
  if (params.hasOwnProperty("zoom")) {
    //捕捉到缩放时
    option.geo[1].zoom = option.geo[0].zoom //下层geo的缩放等级跟着上层的geo一起改变
    option.geo[2].zoom = option.geo[0].zoom
    option.geo[3].zoom = option.geo[0].zoom
    option.geo[1].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变
    option.geo[2].center = option.geo[0].center
    option.geo[3].center = option.geo[0].center
  } else {
    //捕捉到拖曳时
    option.geo[1].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变
    option.geo[2].center = option.geo[0].center
    option.geo[3].center = option.geo[0].center
  }
}
/* ----------------------------------------------地图同步缩放结束-------------------------------------- */
// 销毁组件时候释放图表占用的内存
onBeforeUnmount(() => {
  if (window.currentChart) {
    window.currentChart.dispose()
  }
  if (powerCurve) {
    powerCurve.dispose()
  }
  if (tmpLine) {
    tmpLine.dispose()
  }
})
</script>
<style scoped lang="less">
@import "@/assets/index.css";
.content {
  width: 100%;
  min-height: 100vh;
  background: url("@/assets/screen/bg.jpg") no-repeat center / 100% 100%;
  //padding: 0 20px;

  &_header {
    /* width: 100%;
    height: 146px;
    background: url("@/assets/screen/headerBg1.png") no-repeat top / 100% 100%;
    position: relative;
    margin: 0 auto; */
    &_logo {
      width: 99px;
      height: 33px;
      background: url("@/assets/screen/logo.png") no-repeat top / 100% auto;
      position: absolute;
      left: 40px;
      top: 10px;
    }
    &_date {
      position: absolute;
      right: 40px;
      top: 10px;
      color: #fff;
      text-align: right;
      .year {
        font-size: 22px;
      }
      .month {
        color: #50a2ff;
        font-size: 14px;
      }
    }
    &_select {
      position: absolute;
      left: 20px;
      top: 25px;
      ::v-deep(.ant-select-selector) {
        box-shadow: 0 0 0 1px #5a7181 inset !important;
      }
      :deep(.ant-select-selector) {
        background: transparent !important;
      }
    }
    p {
      font-size: 35px;
      text-align: center;
      line-height: 70px;
      font-weight: bolder;
      background-image: linear-gradient(to bottom, #ffffff, #a1c9f2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
      margin-bottom: 0;
    }
    &_btn {
      font-size: 12px;
      background: rgba(145, 202, 255, 0.4);
      padding: 5px 10px;
      text-align: center;
      border: 1px solid #72b9fc;
      color: #fff;
      position: absolute;
      right: 40px;
      top: 25px;
    }
  }
  &_container {
    margin-top: -60px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    padding: 0 20px;
    &_left,
    &_right {
      width: 440px;
      background: url("@/assets/screen/leftBg.png") no-repeat bottom / 100% 100%;
      padding: 23px 20px;
      max-height: calc(100vh - 90px); //100vh;;
      &_font {
        &_bigTitle {
          font-size: 14px;
          text-align: center;
        }
        &_smallTitle {
          text-align: center;
          font-size: 12px;
          span {
            font-size: 30px;
            font-weight: bolder;
          }

          color: #fff;
        }
      }
      .title {
        width: 100%;
        height: 43px;
        background: url("@/assets/screen/titleBg.png") no-repeat left / 100%
          100%;
        padding-left: 10px;
        box-sizing: border-box;
        line-height: 43px;
        color: #fff;
        padding-left: 40px;
        font-size: 16px;
        font-weight: 700;
      }
      .topConBox {
        backdrop-filter: blur(5px);
        border-radius: 8px;
        padding: 5px 10px;
        //width: calc(50% - 10px);
        display: flex;
        align-items: center;
        gap: 10px;
        &:last-child {
          margin-right: 0;
        }
        .topConIcon {
          flex: 0 0 45px;
          width: 45px;
          height: 45px;
        }
        .content {
          flex: 1;
          min-width: 0;
        }
        &.blue {
          .topConIcon {
            background: url("@/assets/screen/icon1.png") no-repeat left / 100%
              auto;
          }
          background: linear-gradient(
            to right,
            rgba(79, 175, 239, 0.45),
            rgba(0, 123, 255, 0)
          );
          color: #60bdfe;
        }
        &.yellow {
          .topConIcon {
            background: url("@/assets/screen/icon2.png") no-repeat left / 100%
              100%;
          }
          background: linear-gradient(
            to right,
            rgba(224, 156, 76, 0.45),
            rgba(0, 123, 255, 0)
          );
          color: #f1ae4d;
        }
        &.blueGreen {
          direction: rtl;
          .topConIcon {
            background: url("@/assets/screen/icon8.png") no-repeat left / 100%
              auto;
          }
          background: linear-gradient(
            to left,
            rgba(79, 175, 241, 0.45),
            rgba(0, 123, 255, 0)
          );
          color: #4faff1;
        }
        &.green {
          direction: rtl;

          .topConIcon {
            background: url("@/assets/screen/icon9.png") no-repeat left / 100%
              auto;
          }
          background: linear-gradient(
            to left,
            rgba(46, 218, 224, 0.45),
            rgba(0, 123, 255, 0)
          );
          color: #4faff1;
        }
      }
      &_middle {
        margin-top: 3vh;
        &_conBoxMain {
          position: relative;
          height: calc((94vh - 410px) / 2);
          .lineChart {
            height: 100%;
            width: 100%;
          }
          &_bigTitle {
            color: #2a8ad5;
            .font {
              font-size: 24px;
              font-weight: 700;
              position: relative;
              padding-left: 35px;
              &::before {
                display: block;
                content: "";
                width: 27px;
                height: 30px;
                background: url("@/assets/screen/icon3.png") no-repeat left /
                  100% 100%;
                position: absolute;
                left: 0;
                top: 0;
              }
            }
            &.dischargeBattery {
              color: #34d6e8;
              .font {
                &::before {
                  background: url("@/assets/screen/icon4.png") no-repeat left /
                    100% 100%;
                }
              }
            }
          }
          &_smallTitle {
            font-size: 12px;
            color: #fff;
          }
        }
        .pieCon {
          width: 200px;
          height: 200px;
          position: relative;
          .pieBg {
            width: 100px;
            height: 100px;
            background: url("@/assets/screen/pieBg.png") no-repeat center / 100%
              100%;
            position: absolute;
          }
          .rankingBox {
            height: 200px;
            width: 100%;
          }
        }
        .legend {
          font-size: 12px;
          color: #fff;
          &_box {
            margin-top: 4vh;
            padding-left: 15px;
            position: relative;
            &:nth-child(1) {
              margin-top: 0;
            }
            &::before {
              display: block;
              content: "";
              width: 8px;
              height: 8px;
              border-radius: 8px;
              background-color: #74e48c;
              position: absolute;
              left: 0;
              top: 7px;
            }
            &_building {
              &::before {
                background-color: #2c62f6;
              }
            }
            &_waitbuilding {
              &::before {
                background-color: #f8cc76;
              }
            }
            span {
              font-size: 18px;
              color: #9fceff;
            }
          }
        }
      }
      &_bottom {
        margin-top: 3vh;
        &_conBoxMain {
          position: relative;
          height: calc((94vh - 410px) / 2);
          .temperatureCurve {
            height: 100%;
            width: 100%;
          }
        }
      }
    }
    &_right {
      background: url("@/assets/screen/rightBg.png") no-repeat bottom / 100%
        100%;
      &_bottom {
        color: #fff;
        &_userListHeader {
          font-size: 14px;
          background: rgba(0, 138, 255, 0.4);
          height: 30px;
        }
        &_userListBody {
          font-size: 12px;
          color: #9fceff;

          .roll {
            height: 284px;
            overflow-y: auto;

            &::-webkit-scrollbar {
              width: 6px;
              height: 6px;
              background: transparent;
            }

            &::-webkit-scrollbar-thumb {
              background: transparent;
              border-radius: 4px;
            }
            &:hover::-webkit-scrollbar-thumb {
              background: hsla(0, 0%, 53%, 0.4);
            }
            &:hover::-webkit-scrollbar-track {
              background: hsla(0, 0%, 53%, 0.1);
            }
          }
          .ranking {
            width: 40px;
            color: #de8d05;
            text-align: center;
          }
          .listDetial {
            height: 40px;
            //border-bottom: 1px dashed #0090ff;
          }
          .listDetial:nth-child(even) {
            background-color: rgba(0, 144, 255, 0.1);
          }
          div {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
    &_center {
      flex-grow: 1;
      .top {
        margin-top: 3vh;
        &_cap {
          &_title {
            font-size: 14px;
            color: #9fceff;
          }
          &_num {
            width: 61px;
            height: 66px;
            background: url("@/assets/screen/cap.png") no-repeat top/ 100% 100%;
            font-size: 48px;
            color: #ffff;
            text-align: center;
            line-height: 66px;
            margin-left: 10px;
            &:first-child {
              margin-left: 0;
            }
          }
        }
        &_map {
          width: 100%;
          height: calc(79vh - 230px);
          position: relative;
          .data {
            width: 170px;
            height: 300px;
            background: url(@/assets/screen/mapBg.png) no-repeat center/100%
              100%;
            position: absolute;
            right: 10px;
            bottom: 10px;
            z-index: 3;
            padding: 40px 20px;
            box-sizing: border-box;
            color: #fff;
            &_item {
              .title {
                font-size: 14px;
              }
              .con {
                font-size: 12px;
                padding-left: 25px;
                span {
                  font-size: 22px;
                }
                position: relative;
                &::before {
                  display: block;
                  width: 15px;
                  height: 19px;
                  content: "";
                  position: absolute;
                  left: 0;
                  top: 50%;
                  margin-top: -9.5px;
                  background: url(@/assets/screen/diamond.png) no-repeat 0 0;
                }
              }

              &:nth-of-type(2) {
                .con {
                  &::before {
                    background: url(@/assets/screen/diamond.png) no-repeat 0 -66px !important;
                  }
                }
              }
              &:nth-of-type(3) {
                .con {
                  &::before {
                    background: url(@/assets/screen/diamond.png) no-repeat 0 -134px !important;
                  }
                }
              }
              &:nth-of-type(4) {
                .con {
                  &::before {
                    background: url(@/assets/screen/diamond.png) no-repeat 0 -201px !important;
                  }
                }
              }
            }
          }
          .map {
            width: 100%;
            height: 100%;
          }
        }
      }
      &_bottom {
        margin-top: -13vh;
        position: relative;
        z-index: 2;
        .title {
          width: 100%;
          height: 43px;
          background: url(/src/assets/screen/titleBg2.png) no-repeat left / 100%
            100%;
          padding-left: 10px;
          box-sizing: border-box;
          line-height: 43px;
          color: #fff;
          padding-left: 40px;
          font-size: 16px;
          font-weight: 700;
        }
        .IndexBox {
          margin: 0 auto;
          position: relative;
          width: 100%;
          height: 18vh;
          .bottom_con {
            width: 100%;
            height: 100%;
            &_box {
              position: relative;
              height: 100%;
              background: url("@/assets/screen/centerBottomBg.png") no-repeat
                center / 100% 100%;
            }
            &_base {
              width: 123px;
              height: 112px;
              img {
                width: 100%;
              }
            }
            &_font {
              color: #fff;
              &_big {
                color: #24d4e7;
                font-size: 40px;
              }

              font-size: 14px;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 1500px) and (max-width: 1700px) {
  .content_container_left,
  .content_container_right {
    width: 380px;
  }
  .content_container_left_font_bigTitle,
  .content_container_right_font_bigTitle {
    font-size: 12px;
  }
  .bottom_con_font_big {
    font-size: 32px !important;
  }
  .bottom_con_font_sm {
    font-size: 12px !important;
  }
}
@media (max-width: 1500px) {
  .content_container_left,
  .content_container_right {
    width: 340px;
  }
  .content_container_left_font_bigTitle,
  .content_container_right_font_bigTitle {
    font-size: 12px;
  }
  .content_container_left_font_smallTitle,
  .content_container_right_font_smallTitle {
    span {
      font-size: 24px;
    }
  }
  /* .content_container_left_middle_conBoxMain {
    height: 15vh;
  }
  .content_container_right_bottom_conBoxMain {
    height: 18vh;
  } */
  .content_container_right_bottom_content {
    height: 20vh !important;
  }
  .bottom_con_base {
    width: 90px !important;
    height: 82px !important;
    margin-right: 0 !important;
  }
  .bottom_con_font_big {
    font-size: 28px !important;
  }
  .bottom_con_font_sm {
    font-size: 12px !important;
  }
}
</style>
